<template>
  <transition :name="transitionName">
    <div class="back-to-ceiling" >
        <div  class="customer">
                  <!-- <router-link
                    class="nav-link-inside"
                    tag="a"
                    :to="{ path:'/#container'}"
                  >
                    <img class="backtotopimg" src="../assets/images/ico-7.png" alt=""/>
                  </router-link> -->

           
                  <!-- <img class="backtotopimg"  src="../assets/images/ico-7.png" alt=""/> -->

                  <!-- <div class="customer-list">
                        <h2>联系我们</h2>
                        <div class="customer-list-ico" v-for="(item, i) in subsidiary" :key="i">
                          <a :href="item.link" target="_blank">
                            <p>{{item.showTitle}}：</p>
                            <p>{{item.qqNumber}}</p>
                          </a>
                        </div>
                  </div> -->
        
        </div>
        <div>
          <img class="backtotopimg"  v-show="isShow"  @click="backToTop" src="../assets/images/ico-6.png" alt="" />
        </div>
    </div>
  </transition>
</template>

<script>
import api from "@/api/index";
export default {
  name: "BackToTop",
  props: {
    visibilityHeight: {
      type: Number,
      default: 400,
    },
    backPosition: {
      type: Number,
      default: 0,
    },
    customStyle: {
      type: Object,
      default: function () {
        return {

        };
      },
    },
    contactStyle: {
      type: Object,
      default: function () {
        return {
         
        };
      },
    },
    transitionName: {
      type: String,
      default: "fade",
    },
    isShow:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      interval: null,
      isMoving: false,
      subsidiary:'',
    };
  },
  mounted() {
  //  window.addEventListener("scroll", this.handleScroll);
    api.index().then((res) => {
        this.subsidiary = res.data.data.contactList;
      });
  },
  beforeDestroy() {
 //   window.removeEventListener("scroll", this.handleScroll);
    if (this.interval) {
      clearInterval(this.interval);
    }
  },
  methods: {

    handleScroll() {
    //  this.visible = window.pageYOffset > this.visibilityHeight;
    },
    backToTop() {
      if (this.isMoving) return;
      const start = window.pageYOffset;
      let i = 0;
      this.isMoving = true;
      this.interval = setInterval(() => {
        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
        if (next <= this.backPosition) {
          window.scrollTo(0, this.backPosition);
          clearInterval(this.interval);
          this.isMoving = false;
        } else {
          window.scrollTo(0, next);
        }
        i++;
      }, 16.7);
    },
    easeInOutQuad(t, b, c, d) {
      if ((t /= d / 2) < 1) return (c / 2) * t * t + b;
      return (-c / 2) * (--t * (t - 2) - 1) + b;
    },
  }
}
</script>